<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<title></title>
		<meta name="description" content="Neat">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" user-scalable="no">
		<link rel="stylesheet" href="index.css">
		<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script src="https://www.jq22.com/demo/sweetalert-master-150108224250/lib/sweet-alert.js"></script>
		<link rel="stylesheet" href="https://www.jq22.com/demo/sweetalert-master-150108224250/lib/sweet-alert.css">
	</head>
	<body>

		<div class="main-group">
			<h1 style="font-size: 28px;text-align: center;">报平安登记</h1>
			<div class="form-group">
				<div class="form" id="form">

					<select name="" id="classNum" class="text-input">
						<option value="00">选择班级</option>
					</select>
					<select name="" id="month" class="text-input">
						<option value="00">选择月</option>
						<option value="8">8月</option>
					</select>
					<select name="" id="day" class="text-input">
						<option value="00">选择日期</option>
						<option value="20">20</option>
						<option value="21">21</option>
						<option value="22">22</option>
						<option value="23">23</option>
						<option value="24">24</option>
						<option value="25">25</option>
						<option value="26">26</option>
						<option value="27">27</option>
						<option value="28">28</option>
						<option value="29">29</option>
						<option value="30">30</option>
						<option value="31">31</option>
					</select>

					<button type="submit" class="btn submit-btn" onclick="set()">查询</button>
				</div>
			</div>
			<div id="note">
				<ul class="items-group">

				</ul>
			</div>
			<div class="btn-group">
						<button class="del-btn">未报平安号</button>
			</div>
			<span id="nos"></span>
			<div class="icon success animate" style="display: block;"> <span class="line tip animateSuccessTip"></span>
				<span class="line long animateSuccessLong"></span>
				<div class="placeholder"></div>
				<div class="fix"></div>
			</div>
		</div>


	</body>
</html>
<script type="text/javascript">
	$.get(`https://39.107.221.29/studentBpa/classNum.php`,
		function(data, status) {
			data = JSON.parse(data)
			for (let i of data.number.split(",")) {
				$("#classNum")[0].innerHTML += `<option value="${i}">22${i<10?"0"+i:i}</option>`
			}
		})

	function set() {
		let classNum = $("#classNum").val()
		let month = $("#month").val()
		let day = $("#day").val()
		$.get(`https://39.107.221.29/studentBpa/look.php?month=${month}&day=${day}&classNum=${classNum}`, function(data,
			status) {
			if (data == "") {
				swal({
					title: " 查询失败",
					type: "error",
					text: "我也不知道为什么",
					confirmButtonText: "好的"
				});
			} else {
				data=JSON.parse(data)
				let nos=[]
				for(let j=1;j<44;j++){
					nos.push(j)
				}
				$(".items-group")[0].innerHTML=""
				for (let i of data) {
					$(".items-group")[0].innerHTML += `
						<li class="item" style="left: 0px; opacity: 1;">
						<span class="text">${i.name}(${i.student})</span>
						<span class="icon">√</span></li>`
						console.log(nos,i.student)
					nos.splice(nos.indexOf(Number(i.student)),1)
				}
				$("#nos").html(nos.join(","))
				console.log(nos)
			}
		})
		// alert("数据: " + data + "\n状态: " + status);
	}
</script>
